<template>
  <div style="width: 100%" v-loading="loading">
    <span v-show="false"><{{ mainTabsActiveName }} {{ mainTabs }}</span>
    <el-row class="form-wrapper" style="display: flex;flex-wrap: wrap;">
      <el-form ref="form2" :model="form.form" class="adjustForm" :label-width="form.itemLableWidth">
        <span v-for="group in result">
          <el-col :span="24">
            <section style="height:35px;background-color:rgb(238,238,238);line-height:35px;margin-bottom:20px">
              <section style="margin-left:20px;font-size:16px;font-weight:bold">
                {{ group.names }}
              </section>
            </section>
          </el-col>
          <span v-for="(item, index) in group.modelPageVOS">
            <el-col :span="Number(item.itemSpan)" v-if="item.itemFormat === 'input'"
                    :class="{ textareaBox: item.itemLable === '备注' }">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" style="max-width:1280px" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'blur'
                  }
                ]">
                <el-input v-if="item.pageKey=='quantity'" v-thousands.quantity="form.form" @input="getTotalMoney"
                          :disabled="item.isDisable" :readonly="item.isReadonly"
                          :placeholder="item.itemTip" class="adjustInputAppend inputBox"
                          :type="getInputType(item.itemLable)"
                          :class="{ hasAppend: item.itemSuffix }" v-model="form.form[item.pageKey]">
                   <span slot="suffix" v-if="item.itemSuffix">{{
                       item.itemSuffix
                     }}</span>
                 </el-input>
                 <el-input v-else-if="item.pageKey=='smoney'" v-thousands.smoney="form.form" :disabled="item.isDisable"
                           :readonly="item.isReadonly"
                           :placeholder="item.itemTip" class="adjustInputAppend inputBox"
                           :type="getInputType(item.itemLable)"
                           :class="{ hasAppend: item.itemSuffix }" v-model="form.form[item.pageKey]">
                    <span slot="suffix" v-if="item.itemSuffix">{{
                        item.itemSuffix
                      }}</span>
                  </el-input>
               <el-input v-else :disabled="item.isDisable" :readonly="item.isReadonly"
                         v-filter-special-char="form.form[item.pageKey]"
                         :placeholder="item.itemTip" class="adjustInputAppend inputBox"
                         :type="getInputType(item.itemLable)"
                         :class="{ hasAppend: item.itemSuffix }" v-model="form.form[item.pageKey]">
                  <span slot="suffix" v-if="item.itemSuffix">{{
                      item.itemSuffix
                    }}</span>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="item.itemSpan" v-else-if="item.itemFormat === 'select'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'blur'
                  }
                ]">
                <el-select clearable :disabled="item.isDisable" v-model="form.form[item.pageKey]"
                           :placeholder="item.itemTip"
                           style="width: 100%">
                  <el-option v-for="item1 in $dictUtils.getDictList(item.itemDictCode)" :key="item1.value"
                             :label="item1.label"
                             :value="item1.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="item.itemSpan" v-else-if="item.itemFormat === 'selectTree'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'blur'
                  }
                ]">
                <section style="width:320px">
                  <treeselect class="treeselect-adjust" :disable-branch-nodes="true" placeholder="请选择"
                              v-model="form.form[item.pageKey]"
                              :options="item.options" :normalizer="normalizer"/>
                </section>

                <!--      <el-select clearable
                :disabled="item.isDisable"
                v-model="form.form[item.pageKey]"
                :placeholder="item.itemTip"
                style="width: 100%"
              >
                <el-option
                  v-for="item1 in $dictUtils.getDictList(item.itemDictCode)"
                  :key="item1.value"
                  :label="item1.label"
                  :value="item1.value"
                >
                </el-option>
              </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'checkbox'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'change'
                  }
                ]">
                <el-checkbox-group v-model="form.form[item.pageKey]" @change="change1">
                  <el-checkbox v-for="item1 in $dictUtils.getDictList(item.itemDictCode)" :key="item1.value"
                               :label="item1.value"
                               :disabled="item.isDisable">{{ item1.label }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'radio'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'change'
                  }
                ]">
                <el-radio-group v-model="form.form[item.pageKey]"
                                style="position: absolute;top: 8px;">
                  <el-radio v-for="item1 in $dictUtils.getDictList(item.itemDictCode)" :key="item1.value"
                            :label="item1.value"
                            :disabled="item.isDisable">{{ item1.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'datePicker'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'change'
                  }
                ]">
                <el-date-picker format="yyyy-MM-dd" v-model="form.form[item.pageKey]" type="date"
                                :placeholder="item.itemTip"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'dateTimePicker'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired||false,
                    message: item.itemTip,
                    trigger: 'change'
                  }
                ]">
                <el-date-picker format="yyyy-MM-dd HH:mm:ss" v-model="form.form[item.pageKey]" type="datetime"
                                :placeholder="item.itemTip">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!--            客户名称            -->
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'company'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'input'
                  }
                ]">
                   <company-name placeholder="请输入客户名称" @getCompanyData="getCompanyData" :dataItem="item"
                                 ref="companyName"></company-name>
              </el-form-item>
            </el-col>
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'payment'">
              <div class="unitPrice-container price">
                <el-form-item :prop="item.pageKey" :label="item.itemLable" class="unitPrice" :rules="[
                    {
                      required: item.isRequired,
                      message: item.itemTip,
                      trigger: 'blur'
                    }
                  ]">
                  <el-select clearable :disabled="item.isDisable" v-model="form.form[item.pageKey]"
                             :placeholder="item.itemTip"
                             style="width: 100%">
                    <el-option v-for="item1 in $dictUtils.getDictList('payMode')" :key="item1.value"
                               :label="item1.label"
                               :value="item1.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <span>
                  <el-form-item class="unitPrice2" :prop="item.data[0].pageKey" :rules="[
                      {
                        required: item.data[0].isRequired,
                        message: item.data[0].itemTip,
                        trigger: 'blur'
                      }
                    ]">
                    <el-input :disabled="item.data[0].isDisable" v-thousands.price="form.form" @input="getTotalMoney"
                              :readonly="item.data[0].isReadonly"
                              :placeholder="item.data[0].itemTip" class="inputAppend-wrapper selectForm"
                              v-model="form.form[item.data[0].pageKey]">
                      <span slot="suffix" style="color: #999999;">元</span>
                    </el-input>
                  </el-form-item>
                </span>
                <span>
                  <el-form-item class="unitPrice2" :prop="item.data[1].pageKey" :rules="[
                      {
                        required: item.data[1].isRequired,
                        message: item.data[1].itemTip,
                        trigger: 'blur'
                      }
                    ]">
                    <el-checkbox v-model="form.form[item.data[1].pageKey]" :label="item.data[1].itemDefaultValue"
                                 true-label="1" false-label="0">包含运费 </el-checkbox>
                  </el-form-item>
                </span>
              </div>
            </el-col>
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'product'">
              <el-form-item prop="productName" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'input'
                  }
                ]">
                <product-name placeholder="请输入产品名称" @getProductData="getProductData" :dataItem="item"></product-name>
<!--                <el-input :disabled="item.isDisable" :readonly="item.isReadonly" :placeholder="item.itemTip"-->
<!--                          @focus="getProductClient(false,item)"-->
<!--                          class="selectInput selectForm" v-model="form.form['productName']">-->

<!--                </el-input>-->
              </el-form-item>
            </el-col>
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'upload'">
              <el-form-item :prop="item.pageKey" :label="item.itemLable" :rules="[
                  {
                    required: item.isRequired,
                    message: item.itemTip,
                    trigger: 'change'
                  }
                ]">
                <el-upload class="upload-demo" :action="$http.BASE_URL + '/business/fileUpload'"
                           :headers="{ token: $cookie.get('token') }"
                           :on-remove="handleRemove" :on-success="hanleSuccess" :before-remove="beforeRemove"
                           v-model="item.pageKey"
                           multiple :limit="3" :file-list="fileList">
                  <el-button size="small" type="default">点击上传</el-button><span slot="tip" class="el-upload__tip">文件不能超过500kb</span>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="Number(item.itemSpan)" v-else-if="item.itemFormat === 'product2'">
              <section style="margin-left:150px">
                <el-button type="primary" @click="addProduct(item)">新增</el-button>
              </section>
              <el-form-item :label="item.itemLable" style="max-width:1280px">
                <el-table size="mini" :data="form.form[item.pageKey]" style="width: 100%; margin-top: 10px" border
                          :header-cell-style="{
                    'background-color': '#eeeeee !important'
                  }">
                  <el-table-column prop="productName" label="产品名称" align="left"></el-table-column>
                  <el-table-column prop="payMode" label="支付方式"></el-table-column>
                  <el-table-column prop="price" align="right" label="单价"></el-table-column>
                  <el-table-column prop="isFreight" label="是否含运费">
                    <template slot-scope="scope">
                      {{
                        $dictUtils.getDictLabel(
                          "isFreight",
                          scope.row.isFreight,
                          ""
                        )
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="操作" width="94">
                    <template slot-scope="scope">
                      <el-link type="primary" :underline="false" @click="delProduct(scope.row.productId)">删除
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="Number(item.itemSpan)">
              <div class="unitPrice-container2 getType" style="display:flex" v-if="item.itemFormat === 'getMoneyType'">
                <el-form-item label-width="150px" :prop="item.pageKey" :label="item.itemLable"
                              class="unitPrice-container2 type"
                              :rules="[
                    {
                      required: item.isRequired,
                      message: item.itemTip,
                      trigger: 'blur'
                    }
                  ]">
                  <el-select clearable :disabled="item.isDisable" v-model="form.form[item.pageKey]"
                             :placeholder="item.itemTip">
                    <el-option v-for="item1 in $dictUtils.getDictList(item.itemDictCode)" :key="item1.value"
                               :label="item1.label"
                               :value="item1.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item v-for="item2 in item.data" class="unitPrice-container2 typeSelect" :prop="item2.pageKey"
                              :rules="[
                    {
                      required: item2.isRequired,
                      message: item2.itemTip,
                      trigger: 'blur'
                    }
                  ]">
                  <el-select clearable :disabled="item2.isDisable" v-model="form.form[item2.pageKey]"
                             :placeholder="item2.itemTip">
                    <el-option v-for="item1 in $dictUtils.getDictList(
                        item2.itemDictCode
                      )"
                               :key="item1.value" :label="item1.label" :value="item1.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="Number(item.itemSpan)">
              <div class="unitPrice-container2 getType" style="display:flex" v-if="item.itemFormat === 'isQuality'">
                <el-form-item label-width="150px" :prop="item.pageKey" :label="item.itemLable"
                              class="unitPrice-container2 type"
                              :rules="[
                    {
                      required: item.isRequired,
                      message: item.itemTip,
                      trigger: 'blur'
                    }
                  ]">
                  <el-select clearable :disabled="item.isDisable" v-model="form.form[item.pageKey]"
                             :placeholder="item.itemTip">
                    <el-option v-for="item1 in $dictUtils.getDictList(item.itemDictCode)" :key="item1.value"
                               :label="item1.label"
                               :value="item1.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item v-for="item2 in item.data" class="unitPrice-container2 typeSelect" :prop="item2.pageKey"
                              :rules="[
                    {
                      required: item2.isRequired,
                      message: item2.itemTip,
                      trigger: 'blur'
                    }
                  ]">
                  <el-select clearable :disabled="item2.isDisable" v-model="form.form[item2.pageKey]"
                             :placeholder="item2.itemTip">
                    <el-option v-for="item1 in $dictUtils.getDictList(
                        item2.itemDictCode
                      )"
                               :key="item1.value" :label="item1.label" :value="item1.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </span>
        </span>
      </el-form>
    </el-row>

    <div class="btn-wrapper">
      <el-button type="primary" @click="submitForm">{{ buttonName }}</el-button>
      <el-button v-if="form.form.method !== 'confirm'" @click="reset">取消</el-button>
    </div>
    <el-dialog :visible.sync="productDialog" title="新增产品" class="product-dialog" :close-on-click-modal="false"
               @close="handlerFlag">
      <el-form label-width="150px" ref="productForm" :model="product2">
        <el-form-item label="产品名称:" prop="productName" :rules="[
            {
              required: true,
              message: '请选择产品名称',
              trigger: 'input'
            }
          ]">
          <product-name placeholder="请输入产品名称" @getProductData="getProductData" :dataItem="addProductValue"></product-name>
<!--          <el-input @focus="getProductClient(true,addProductValue)" v-model="product2.productName"-->
<!--                    class="selectInput selectForm"-->
<!--                    placeholder="请选择产品名称">-->
            <!--            <template slot="append"><span @click="getProductClient(true)">选择</span></template>-->
<!--          </el-input>-->
        </el-form-item>
        <el-form-item label="支付方式:" prop="payMode" :rules="[
            {
              required: true,
              message: '请选择支付方式',
              trigger: 'change'
            }
          ]">
          <el-select clearable v-model="product2.payMode">
            <el-option v-for="item1 in $dictUtils.getDictList('payMode')" :key="item1.value" :label="item1.label"
                       :value="item1.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价:" prop="price" :rules="[
            {
              required: true,
              message: '请输入单价',
              trigger: 'blur'
            }
          ]">
          <el-input v-model="product2.price" placeholder="请输入单价" v-thousands.price="product2"></el-input>
        </el-form-item>
        <el-form-item label="是否包含运费:" prop="isFreight" :rules="[
            {
              required: true,
              message: '是否包含运费',
              trigger: 'change'
            }
          ]">
          <el-radio-group v-model="product2.isFreight">
            <el-radio v-for="item in $dictUtils.getDictList('isFreight')" :key="Number(item.value)"
                      :label="Number(item.value)">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="addProductItem" v-noMoreClick>确定</el-button>
        <el-button size="small" @click="removeTabHandle($route.fullPath)">取消</el-button>
      </span>
    </el-dialog>

    <!--产品选择弹窗-->
    <!--    <ProductDialog ref="ProductDialog" @getProductData="getProductData">-->
    <!--    </ProductDialog>-->
    <!--客户选择弹窗-->
    <!--    <CompanyDialog ref="CompanyDialog" @getCompanyData="getCompanyData" :isTypeCompany="isTypeCompany" >-->
    <!--    </CompanyDialog>-->
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import {
  isNull
} from '@/utils/validate.js'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
  getModelPage,
  postModelPage,
  deleteFile,
  getModelPageByBusinessId,
  confirmBusiness
} from '@/api/model/model.js'
import {
  getForm,
  getTreeData
} from '@/api/form/form.js'
import ProductDialog from '@/components/dialog/productDialog.vue'
import CompanyDialog from '@/components/dialog/companyDialog.vue'

export default {
  components: {
    ProductDialog,
    CompanyDialog,
    Treeselect,
    companyName: () => import('@/components/autoSelectName/companyName'),
    productName: () => import('@/components/autoSelectName/productName')
  },
  computed: {
    mainTabsActiveName: {
      get () {
        return this.$store.state.common.mainTabsActiveName
      },
      set (val) {
        this.$store.commit('common/updateMainTabsActiveName', val)
      }
    },
    mainTabs: {
      get () {
        return this.$store.state.common.mainTabs
      },
      set (val) {
        this.$store.commit('common/updateMainTabs', val)
      }
    }
  },
  data () {
    return {
      isTypeCompany: false,      // 是否存在itemType===2
      loading: true,             // 初始化是loading
      // 实例对象
      form1: {},
      fileList: [],
      result: [], // 返回的全部结果
      isProduct: false, // 单个产品选择
      form: {
        itemLableWidth: '150px',
        form: {
          id: '',
          modelId: '',
          modelName: '',
          method: '',
          businessId: ''
        }
      },
      types: [],
      selectTree: [],
      product2: {
        isFreight: 0,
        price: '',
        productName: ''
      },
      flag: false,
      buttonName: '确定',
      isProduct2: false, // 是否有产品2
      productDialog: false, // 产品dialog
      addProductValue: ''   // 添加产品信息 item
    }
  },
  methods: {
    // 初始化调用页面接口数据
    initFormData () {
      this.form.form.modelId = this.$route.query.id
      this.form.form.modelName = this.$route.query.title
      this.form.form.method = this.$route.query.method
      this.form.form.businessId = this.$route.query.businessId
      this.form.form.id = this.$route.query.businessId
      if (this.form.form.method === 'add') {
        getModelPage({
          modelId: this.$route.query.id
        }).then(res => {
          this.result = res.data.result
          res.data.result.forEach(item => {
            this.types = this.types.concat(item.modelPageVOS)
          })
          this.loading = false
          this.setValue()
        })
      } else if (
        this.form.form.method === 'edit' || 'confirm' || 'continue'
      ) {
        getModelPageByBusinessId({
          modelId: this.$route.query.id,
          businessId: this.$route.query.businessId
        }).then(res => {
          if (this.form.form.method === 'edit') {
            this.buttonName = '保存'
          } else if (this.form.form.method === 'continue') {
            this.buttonName = '续签'
          } else {
            this.buttonName = '提交'
          }
          this.result = res.data.result
          res.data.result.forEach(item => {
            this.types = this.types.concat(item.modelPageVOS)
          })
          this.setValue()
          this.loading = false
        })
      }
    },
    // tabs, 删除tab
    removeTabHandle (tabName) {
      var obj = this.mainTabs.filter(item => item.fullPath === tabName)[0]
      var index = this.mainTabs.indexOf(obj)
      this.mainTabs = this.mainTabs.filter(item => item.fullPath !== tabName)
      if (this.mainTabs.length > 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          if (index < this.mainTabs.length) {
            this.$router.push({path: this.mainTabs[index].fullPath}, () => {
              this.mainTabsActiveName = this.$route.fullPath
            })
          } else {
            this.$router.push({path: this.mainTabs[index - 1].fullPath}, () => {
              this.mainTabsActiveName = this.$route.fullPath
            })
          }
        }
      } else {
        this.menuActiveName = ''
        this.$router.push({name: 'home'})
      }
    },
    // 计算产品金额
    getTotalMoney (e) {
      if (!isNull(this.form.form.price) && !isNull(this.form.form.quantity)) {
        this.form.form.price = this.form.form.price.replace(/,/g, '')
        this.form.form.quantity = this.form.form.quantity.replace(/,/g, '')
        this.form.form.smoney = this.formatIntSalary(this.form.form.price * this.form.form.quantity)
      } else {
        this.form.form.smoney = 0
      }
    },
    handleClose (done) {
      this.$Msg.confirm({
        title: '您确定要关闭吗？',
        content: this.GLOBAL.FORM_CLOSE_TIPS,
        confirmCall: () => {
          done()
        }
      })
    },
    exec (array) {
      array.forEach(item => {
        if (item.children.length === 0) {
          delete item.children
        } else {
          this.exec(item.children)
        }
      })
    },
    getInputType (label) {
      if (label === '备注') {
        return 'textarea'
      }
    },
    normalizer (node) {
      return {
        id: node.id,
        label: node.names,
        children: node.children
      }
    },
    submitForm () {
      this.$refs['form2'].validate(valid => {
        if (valid) {
          if (this.isProduct) {
            var product = {
              productName: '',
              productId: '',
              price: '0',
              payMode: '1',
              isFreight: '0'
            }
            product.productName = this.form.form.productName
            product.productId = this.form.form.productId
            product.price = this.form.form.price
            product.payMode = this.form.form.payMode
            product.isFreight = this.form.form.isFreight
            this.$set(this.form.form, 'product', product)
          }
          if (!isNull(this.form.form.products)) {
            if (this.form.form.products.length === 0) {
              this.$message('请选择产品')
              return
            }
          }
          if (this.form.form.method === 'confirm') {
            confirmBusiness({
              id: this.form.form.id
            }).then(res => {
              if (res.data.code === '200') {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
              }
            })
          } else {
            var fromBuffer = JSON.parse(JSON.stringify(this.form.form))
            delete fromBuffer.productName
            delete fromBuffer.productId
            delete fromBuffer.price
            delete fromBuffer.payMode
            delete fromBuffer.isFreight
            if (!isNull(fromBuffer.product.price)) {
              fromBuffer.product.price = fromBuffer.product.price.replace(/,/g, '')
            }
            if (!isNull(fromBuffer.quantity)) {
              fromBuffer.quantity = fromBuffer.quantity.replace(/,/g, '')
            }
            if (!isNull(fromBuffer.smoney)) {
              fromBuffer.smoney = fromBuffer.smoney.replace(/,/g, '')
            }
            if (this.form.form.method == 'continue') {
              delete fromBuffer.businessId
              this.$set(fromBuffer, 'businessIdOld', this.$route.query.businessId)
              postModelPage(fromBuffer).then(res => {
                if (res.data.code === '200') {
                  delete fromBuffer.businessIdOld
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })
                }
              })
            } else {
              postModelPage(fromBuffer).then(res => {
                if (res.data.code === '200') {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })
                  //this.cancelForm()
                  this.removeTabHandle(this.$route.fullPath)
                }
              })
            }
          }
        }
      })
    },
    // 打开产品弹框
    addProduct (item) {
      this.flag = true
      this.addProductValue = item
      this.productDialog = true
      this.$set(this.product2, 'productName', '')
      this.$set(this.product2, 'productId', '')
      this.product2.payMode = this.$dictUtils.getDictList('payMode')[0].value
      this.product2.price = ''
      this.product2.isFreight = Number(this.$dictUtils.getDictList('isFreight')[0].value)
      // this.$refs.productForm.resetFields()
    },
    // 关闭新增
    handlerFlag () {
      this.flag = false
    },
    // 添加产品
    addProductItem () {
      this.$refs['productForm'].validate(valid => {
        if (valid) {
          for (let index = 0; index < this.types.length; index++) {
            if (this.types[index].itemFormat === 'product2') {
              let key = this.types[index].pageKey
              this.form.form[key].push(
                JSON.parse(JSON.stringify(this.product2))
              )
              break
            }
          }
          this.productDialog = false
        }
      })
    },
    // 删除产品
    delProduct (id) {
      for (let index = 0; index < this.types.length; index++) {
        if (this.types[index].itemFormat === 'product2') {
          let key = this.types[index].pageKey
          for (let i = 0; i < this.form.form[key].length; i++) {
            if (this.form.form[key][i].productId == id) {
              this.form.form.products.splice(i, 1)
            }
          }
        }
      }
    },
    // 上传移除
    handleRemove (file, fileList) {
      this.fileList = fileList
      // deleteFile()
      // splice
    },

    // 上传成功
    hanleSuccess (response, file, fileList) {
      for (let index = 0; index < this.types.length; index++) {
        if (this.types[index].itemFormat === 'upload') {
          let key = this.types[index].pageKey
          if (!this.form.form[key]) {
            this.$set(this.form.form, key, [])
          }
          this.form.form[key].push(response.result.id)
          this.fileList = fileList
        }
      }
    },
    // 上传移除前
    beforeRemove (file) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.uid === this.fileList[i].uid) {
          for (let index = 0; index < this.types.length; index++) {
            if (this.types[index].itemFormat === 'upload') {
              let key = this.types[index].pageKey
              deleteFile({
                oleImgId: this.form.form[key][i]
              }).then(res => {
                this.form.form[key].splice(i, 1)
              })
            }
          }
        }
      }
    },
    rest () {
      this.form.form.input = ''
    },
    /*
    *     前端通过后台返回sql查信息专用方法
    *     item          列表item
    *     title         客户名称/产品名称
    *     isProduct     是不是打开产品列表
    * */
 /*   openVisibleBySql(item, title, isProduct) {
      this.$refs['CompanyDialog'].dialogVisible = true
      this.$refs['CompanyDialog'].isTypeCompany = item.itemType === 2
      this.$refs['CompanyDialog'].itemDictCode = item.itemDictCode
      this.$refs['CompanyDialog'].title = title
      this.$refs['CompanyDialog'].isProduct = isProduct
      this.$refs.CompanyDialog.initData()
    }, */

    // 客户选择弹窗
    getCompanyClient (item) {
      this.openVisibleBySql(item, '选择客户', false)
    },
    // 客户选择数据回显
    getCompanyData (row) {
      this.form.form.companyName = row.names
      this.$set(this.form.form, 'companyId', row.id)
    },
    // 产品选择弹窗
   /* getProductClient (isProduct2, item) {
      this.isProduct2 = !!isProduct2
      this.$refs['ProductDialog'].dialogVisible = true
      this.$refs['ProductDialog'].isTypeCompany = item.itemType === 2
      this.$refs['ProductDialog'].itemDictCode = item.itemDictCode
      this.$refs.ProductDialog.initData()
    },*/

    getProductData (row, names = 'names') {
      if (this.flag) {
        this.product2.productName = row[names]
        this.product2.productId = row.id
      } else {
        this.$set(this.form.form, 'productName', row[names])
        this.$set(this.form.form, 'productId', row.id)
      }
      this.$nextTick(() =>this.$refs.productForm? this.$refs.productForm.clearValidate():'')
    },
    reset () {
      for (let index = 0; index < this.types.length; index++) {
        const element = this.types[index]
        if (this.types[index].itemFormat === 'checkbox') {
          this.$set(this.form.form, this.types[index].pageKey, [])
        } else if (this.types[index].itemFormat === 'product2') {
          this.$set(this.form.form, this.types[index].pageKey, [])
        } else if (this.types[index].itemFormat === 'product') {
          this.form.form.productName = ''
          this.form.form.productId = ''
        } else if (this.types[index].itemFormat === 'selectTree') {
          this.$set(this.form.form, this.types[index].pageKey, null)
        } else {
          this.$set(this.form.form, this.types[index].pageKey, '')
        }
      }

      if (!isNull(this.form.form.price)) {
        this.form.form.price = ''
        this.form.form.isFreight = '0'
      }

      this.$nextTick(() => {
        this.$refs.form2.clearValidate()
      })
      this.removeTabHandle(this.$route.fullPath)
    },
    // 设置属性并赋值
    setValue () {
      for (let index = 0; index < this.types.length; index++) {
        const element = this.types[index]

        if (this.types[index].itemFormat === 'checkbox') {
          this.$set(this.form.form, this.types[index].pageKey, [
            this.types[index].itemDefaultValue
          ])
        } else if (this.types[index].itemFormat === 'product2') {
          if (this.types[index].products) {
            this.$set(
              this.form.form,
              this.types[index].pageKey,
              this.types[index].products
            )
          } else if (!this.types[index].itemDefaultValue) {
            let array = [{}]
            this.$set(this.form.form, this.types[index].pageKey, [])
          }
        } else if (this.types[index].itemFormat === 'product') {
          this.isProduct = true

          this.$set(
            this.form.form,
            'productName',
            this.types[index].itemDefaultValue
          )
          if (this.types[index].itemDefaultValue) {
            this.$set(
              this.form.form,
              this.types[index].itemFormat + 'Id',
              this.types[index].itemDefaultValueId
            )
          } else {
            this.$set(
              this.form.form,
              this.types[index].itemFormat + 'Id',
              ''
            )
          }
        } else if (this.types[index].itemFormat === 'company') {
          this.$set(
            this.form.form,
            this.types[index].pageKey,
            this.types[index].itemDefaultValue
          )
          if (this.types[index].itemDefaultValue) {
            this.$set(
              this.form.form,
              this.types[index].itemFormat + 'Id',
              this.types[index].itemDefaultValueId
            )
          } else {
            this.$set(
              this.form.form,
              this.types[index].itemFormat + 'Id',
              ''
            )
          }
        } else if (this.types[index].itemFormat === 'payment') {
          this.$set(this.form.form, this.types[index].data[0].pageKey, this.types[0].itemDefaultValue)
          this.form.form.price = this.formatIntSalary(this.form.form.price)
          if (this.types[index].data[1].itemDefaultValue == '1') {
            this.$set(this.form.form, this.types[index].data[1].pageKey, '1')
          } else {
            this.$set(this.form.form, this.types[index].data[1].pageKey, '0')
          }

        } else if ((this.types[index].itemFormat === 'getMoneyType') || (this.types[index].itemFormat === 'isQuality')) {
          this.$set(
            this.form.form,
            this.types[index].pageKey,
            this.types[index].itemDefaultValue
          )
          this.$set(this.form.form, this.types[index].data[0].pageKey, this.types[0].itemDefaultValue)
        } else if (this.types[index].itemFormat === 'selectTree') {
          this.$http({
            url: this.types[index].apiUrl,
            method: 'get'
          }).then(({
                     data
                   }) => {
            if (data && data.success) {
              this.exec(data.result)
              this.$set(this.types[index], 'options', data.result)
              if (!this.types[index].itemDefaultValue) {
                this.$set(this.form.form, this.types[index].pageKey, null)
              } else {
                this.$set(
                  this.form.form,
                  this.types[index].pageKey,
                  this.types[index].itemDefaultValue
                )
              }
            }
          })
        } else if (this.types[index].pageKey == 'smoney' || this.types[index].pageKey == 'quantity') {
          this.$set(
            this.form.form,
            this.types[index].pageKey,
            this.formatIntSalary(this.types[index].itemDefaultValue)
          )
        } else {
          this.$set(
            this.form.form,
            this.types[index].pageKey,
            this.types[index].itemDefaultValue
          )
        }
      }
    }
  },
  activated () {
    this.initFormData()
  },
  mounted () {
    this.initFormData()
  }
}
</script>
<style lang="scss" scoped>
.treeselect-adjust.vue-treeselect {
  line-height: 18px;

  .vue-treeselect__multi-value-item {
    padding-right: 5px;

    .vue-treeselect__multi-value-label {
      padding-right: 3px;
    }

    .vue-treeselect__value-remove {
      border-left: none;
      width: 10px;
      height: 10px;
      padding: 0;
      /*border-radius: 4px;*/
      /*display: inline-block;*/
      text-align: center;

      > svg {
        width: 6px;
        height: 6px;
      }
    }
  }
}

::v-deep.product-dialog {
  .el-input__inner {
    width: 320px;
  }

  .el-radio__label {
    font-size: 16px;
  }

  .inputAppend-wrapper.hasAppend,
  .inputAppend-wrapper.selectForm {
    .el-input__inner {
      width: 282px !important;
    }
  }
}

.btn-wrapper {
  text-align: center;
  margin-bottom: 4px;
  margin-top: 8px;
  max-width: 1280px;

  .el-button:first-child {
    margin-right: 10px;
  }
}

::v-deep.adjustForm.el-form {
  .textareaBox {
    width: 100%;
  }

  .el-table {

    th:first-child .cell,
    td:first-child .cell {
      text-align: left !important;
      padding: 0 20px !important;
    }
  }

  .el-form-item {
    .upload-demo {
      .el-button {
        width: 90px;
      }

      .el-upload__tip {
        margin-left: 10px;
      }
    }

    .el-textarea {
      .el-textarea__inner {
        resize: none;
        height: 92px;
        border: 1px solid #aaaaaa;
        border-radius: 4px;
        padding: 5px 10px;
        font-family:Arial;
        /*width: calc(100% - 141px);*/
      }
    }

    .el-input__inner {
      width: 320px !important;
    }

    .inputAppend-wrapper.hasAppend,
    .inputAppend-wrapper.selectForm {
      .el-input__inner {
        width: 282px !important;
      }
    }

    .el-date-editor {
      .el-input__inner {
        padding-left: 30px !important;
      }
    }

    .el-form-item__content {
      line-height: inherit !important;

      .el-input__suffix {
        line-height: 32px;
      }
    }
  }

  .unitPrice-container2.price {
    display: flex;

    .unitPrice2 {
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }

    > div {
      margin-right: 10px;

      .el-select {
        width: inherit !important;
      }

      .el-input__inner {
        width: 180px !important;
      }
    }

    > span .inputAppend-wrapper.selectForm .el-input__inner {
      width: 152px !important;
    }

    > span:last-child {
      margin-left: 10px;

      .el-checkbox {
        line-height: 36px;
      }
    }
  }

  .unitPrice-container.price {
    display: flex;

    .unitPrice2 {
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }

    > div {
      margin-right: 10px;

      .el-select {
        width: inherit !important;
      }

      .el-input__inner {
        width: 100px !important;
      }
    }

    > span .inputAppend-wrapper.selectForm .el-input__inner {
      width: 120px !important;
    }

    > span:last-child {
      margin-left: 10px;

      .el-checkbox {
        line-height: 29px;
      }
    }
  }

  .unitPrice-container2.getType {
    .el-select {
      width: inherit !important;
    }

    .unitPrice-container2.type {
      .el-form-item__content {
        margin-left: 0 !important;
      }

      .el-input__inner {
        width: 100px !important;
      }
    }

    .unitPrice-container2.typeSelect {
      .el-form-item__content {
        margin-left: 10px !important;

        .el-input__inner {
          width: 210px !important;
        }
      }
    }
  }
}

.unitPrice-container2 {
  display: flex;

  ::v-deep .el-select {
    width: 200px !important;
  }
}

/*::v-deep .el-input {*/
/*position: relative;*/
/*font-size: 14px;*/
/*display: inline-block;*/
/*width: 270px !important;*/
/*}*/
/*.dialog {*/
/*  .el-select {*/
/*    width: 100% !important;*/
/*  }*/
/*::v-deep .el-input {*/
/*  position: relative;*/
/*  font-size: 14px;*/
/*  display: inline-block;*/
/*  width: 100% !important;*/
/*}*/
/*::v-deep .el-input__inner {*/
/*  width: 100% !important;*/
/*}*/
/*}*/

/*::v-deep .el-input__inner {*/
/*  width: 270px !important;*/
/*}*/

/*.el-select {*/
/*  width: 270px !important;*/
/*}*/
/*.unitPrice-container {*/
/*  position: relative;*/
/*}*/
/*.unitPrice {*/
/*  .el-select {*/
/*    width: 100px !important;*/
/*  }*/
/*  ::v-deep .el-input {*/
/*    position: relative;*/
/*    font-size: 14px;*/
/*    display: inline-block;*/
/*    width: 100px !important;*/
/*  }*/
/*  ::v-deep .el-input__inner {*/
/*    width: 100px !important;*/
/*  }*/
/*}*/
/*.unitPrice2 {*/
/*  ::v-deep .el-input {*/
/*    position: relative;*/
/*    font-size: 14px;*/
/*    display: inline-block;*/
/*    width: 100px !important;*/
/*  }*/
/*  ::v-deep .el-input__inner {*/
/*    width: 100px !important;*/
/*  }*/
/*}*/
</style>
